<template>
    <div>
    <el-timeline>
        <template v-for="(item,inx) in tableData">
            <el-timeline-item :key="inx" :timestamp="item.create_time_text" type="success" size="large" icon="fast-icon-feed-logo" placement="top">
                <el-card>
                    <h4>V {{item.version_no}} - {{item.title}} 
                        <span style="color:#e74c3c;" v-if="item.is_pay == 1">[需支付：￥{{item.money}}元]</span>
                        <span style="color:#18bc9c;" v-else>[免费]</span>
                        <span style="float:right;">
                            <el-button type="success" v-if="item.is_pay == 1" size="mini" @click="hanledPayment(item)">安装</el-button>
                            <el-button type="success" v-else size="mini" @click="hanledInstall(item)">安装</el-button>
                        </span>
                    </h4>
                    <p>要求EasyAdmin版本必须在 <span style="color:#18bc9c;">{{item.version_id}}</span> 之上</p>
                    <p>支持平台：{{item.platform_text.join(' / ')}}</p>
                    <div>
                        <p>更新说明：</p>
                        <el-input type="textarea" v-model="item.note" :autosize="{ minRows: 5, maxRows: 10}" disabled readonly> </el-input>
                    </div>
                </el-card>
            </el-timeline-item>
        </template>
    </el-timeline>
    <el-dialog title="支付信息" :visible.sync="paymentVisible"  append-to-body width="30%" :before-close="function(){return paymentVisible=false;}">
        <el-card class="box-card">
            <div class="text item">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="微信支付" name="wechat">
                        <div style="margin:20px auto;width:220px;height:220px;">
                            <el-image :src="payInfo.wechat_url" style="width:100%;height:100%"></el-image>
                        </div>
                        <div style="text-align:center; margin:20px 0px;" v-if="payInfo['down_time']">
                            
                            <el-tag size="mini" >
                                剩余:<count-down :endTime="payInfo['down_time']*1000" @on-end="endtimeEvent" :key="Math.random()"></count-down>
                            </el-tag>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="支付宝支付" name="alipay">
                        <div style="margin:20px auto;width:220px;height:220px;">
                            <el-image :src="payInfo.alipay_url" style="width:100%;height:100%"></el-image>
                        </div>
                        <div style="text-align:center; margin:20px 0px;" v-if="payInfo['down_time']">
                            <el-tag size="mini" >
                                剩余:<count-down :endTime="payInfo['down_time']*1000" @on-end="endtimeEvent" :key="Math.random()"></count-down>
                            </el-tag>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div style="text-align:center;">
                <span style="margin:0 15px;color:#e74c3c;font-weight: bold;">需支付：￥{{payInfo.total_money}}元</span>
               <el-button type="success"  size="mini" @click="hanledInstall">确认已扫码支付</el-button>
            </div>
        </el-card>
         
     </el-dialog>
    </div>
</template>
<script>
import {addonAjaxPost} from '@/utils/ajax'
import { utils } from "@/utils/utils";
import {installAddons} from '@/api/plug'

export default {
    components:{
        CountDown:()=>import('@/widgets/xdh-table/src/countdown'),
    },
    props:{
        detail:{
            type:Object,
            default:()=>{
                return {};
            }
        }
    },
    data(){
        return {
            tableData : [],
            //列表
            indexUrl:'/api/plug/getPlugVersionList',
            ercodeUrl:'/api/payment/getPayErcode',
            paymentVisible:false,
            
            activeName:'wechat',
            payInfo:{},
            
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        async init(){
            if(!utils.cacheGet("addonappstr")) {
                return false;
            }
            var that = this;
            var d = {
                id : this.detail.id,
                token : this.detail.token
            };
            addonAjaxPost(this.indexUrl,d,function(result){
                if(result.code == 200) {
                    if(result.data.list.length === 0) {
                        that.$message({
                            message: '没有可安装升级的版本' ,
                            type: 'info',
                            duration: 5 * 1000
                        });
                        that.$emit('click',{});
                    }
                    that.tableData = result.data.list;
                }
            });
        },
        async hanledInstall(item){
            var d = {
                name : this.detail.alias,
                force:true,
                id:item.id,
                token:item.token,
                version:item.version_no,
                addons_str:utils.cacheGet("addonappstr")
            };
            
            const res = await installAddons(d);
            if(res.code == 200) {
                this.$message({
                    message: res.msg ,
                    type: 'success',
                    duration: 5 * 1000
                })
                this.$emit('refresh',{});
            }
        },
        hanledPayment(item){
            var that = this;
            var d = {
                id:item.id,
                token:item.token,
                pay_type:this.activeName
            };
            
            addonAjaxPost(this.ercodeUrl,d,function(result){
                if(result.code == 200) {
                    that.payInfo = result.data.info;
                    that.paymentVisible = true;
                }
            });
            
        },
        endtimeEvent(){
            this.paymentVisible = false;
        }
    }
}
</script>